
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../static/css/mainPage.css" th:href="@{/css/mainPage.css}">
  <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;width: 100%">
  <div class="header header1">

    <div class="logoName">
      <img src="../static/img/name.png" alt="" class="logo-name-img" th:src="@{/img/name.png}">
    </div>

    <nav>
      <ul >
        <li class="mainPage" ><a href="" style="color: #0087fe;">首页</a></li>
        <li class="wait-answer"><a href="">后台管理</a></li>
      </ul>
    </nav>
    <form class="search-form" th:action="@{/selectByKeywords}" method="get">
      <label >
            <span>

                <input type="text" placeholder="请输入" name="keywords">
                <i class="iconfont search-icon">&#xe620;</i>
            </span>

      </label>
      <button class="ask-question-btn">搜索</button>
    </form>
    <div class="user-info">
<!--      <div style="margin-right: 60px;" class="message">-->
<!--        <i class="iconfont message-icon">&#xe625;</i>-->
<!--        <i class="message-detail">消息-->

<!--        </i>-->
<!--        <div class="notification-container">-->
<!--          <div class="notification-header">-->
<!--                    <span class="menu-text">-->
<!--                        <i class="menu-icon iconfont middle " style="color: #ff9606;">&#xe608; </i> 菜单</span>-->
<!--            <span class="user-text">-->
<!--                        <i class="iconfont little user-icon">&#xe659; </i> 用户</span>-->
<!--            <span class="favorites-text">-->
<!--                        <i class="iconfont little favorites-icon">&#xe6de; </i> 点赞</span>-->
<!--          </div>-->
<!--          <div class="notification-list">-->
<!--            <div class="notification-item">-->
<!--              <span class="sender">槿木</span>-->
<!--              <span class="action">邀请你回答问题</span>-->
<!--              <span class="question">高三，谈恋爱和前途应该选哪一个?</span>-->
<!--              <span class="time">2025-04-18 08:31</span>-->
<!--            </div>-->
<!--            <div class="notification-item">-->
<!--              <span class="sender">倩倩有点冷 </span>-->
<!--              <span class="action"> 邀请你回答问题</span>-->
<!--              <span class="question">你觉得没对象和没钱哪个更可怕?</span>-->
<!--              <span class="time">2025-04-18 08:31</span>-->
<!--            </div>-->
<!--            <div class="notification-item">-->
<!--              <span class="sender">十三</span>-->
<!--              <span class="action">的提问等你来答</span>-->
<!--              <span class="question">累的时候，你是选择喝酒，还是一个人旅行?</span>-->
<!--              <span class="time">2020-10-13 20:20</span>-->
<!--            </div>-->
<!--            <div class="notification-item last" >-->
<!--              <span class="sender">清欢渡</span>-->
<!--              <span class="action">的提问等你来答</span>-->
<!--              <span class="question">我真的爱她，前途和她哪个重要?</span>-->
<!--              <span class="time">2020-10-13 20:20</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="notification-list2" >-->
<!--            <div class="notification-item-header">-->
<!--              <span>这些人最近关注了你</span>-->
<!--            </div>-->
<!--            <div class="notification-item">-->
<!--              <div class="notification-item-img">-->
<!--                <img src="../static/img/OIP-C.jpg " alt="" th:src="@{/img/OIP-C.jpg}">-->
<!--              </div>-->
<!--              <div  class="notification-item-detail">-->
<!--                <span class="id">樱桃</span>-->
<!--                <span>难的相遇一下，真的不关注一下吗</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="notification-item">-->
<!--              <div class="notification-item-img">-->
<!--                <img src="../static/img/OIP-C (1).jpg" alt="" th:src="@{/img/OIP-C (1).jpg}">-->
<!--              </div>-->
<!--              <div class="notification-item-detail">-->
<!--                <span class="id">偷偷看你一下</span>-->
<!--                <span>关注一下吧</span>-->
<!--              </div>-->
<!--            </div>-->

<!--          </div>-->

<!--          <div class="none">-->
<!--                <span>-->
<!--                    <i class="iconfont big" >&#xea09;</i>-->
<!--                    暂无消息哦~-->
<!--                </span>-->

<!--          </div>-->
<!--          <div class="footer">-->
<!--                <span class="settings-text">-->
<!--                    <i class="iconfont">&#xe66f;</i>设置</span>-->
<!--            <span class="view-all-text">查看全部通知</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div style="margin-right: 60px;" class="private-message">-->
<!--        <i class="iconfont private-message-icon">&#xe6e2;</i>-->
<!--        <i class="private-message-detail">私信</i>-->
<!--        <div class="notification-container2">-->
<!--          <div class="notification-header">-->
<!--                    <span class="private-message-text">-->
<!--                        <i class="private-massage-icon iconfont middle " >&#xe634; </i>我的私信-->
<!--                    </span>-->
<!--          </div>-->
<!--          <div class="notification-list3" >-->
<!--            <div class="notification-item">-->
<!--              <div class="notification-item-img">-->
<!--                <img src="../static/img/下载.jpg" alt="" th:src="@{/img/下载.jpg}">-->
<!--              </div>-->
<!--              <div  class="notification-item-detail">-->
<!--                <span class="id">慧问小管家</span>-->
<!--                <span>亲爱的 慧问用户 你好：欢迎你来到慧问：...</span>-->
<!--              </div>-->
<!--            </div>-->

<!--          </div>-->
<!--          <div class="footer">-->
<!--                    <span class="settings-text">-->
<!--                        <i class="iconfont">&#xe627; </i> 写私信</span>-->
<!--            <span class="view-all-text">查看全部私信</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
      <div class="user-actions">
        <img th:src="${session.user?.avatar ?: '/img/Icon -默认头像_爱给网_aigei_com.png'}" alt="User Avatar" class="user-avatar">
        <ul class="dropdown-menu">
          <li class="personalMainPage"> <i class="iconfont">&#xe629;</i><a href="">我的主页</a></li>
          <li><i class="iconfont">&#xe6de;</i><a href="">无障碍</a></li>
          <li><i class="iconfont">&#xe67a;</i><a href="">关怀版</a></li>
          <li><i class="iconfont">&#xe600;</i><a href="">设置</a></li>
          <li><i class="iconfont">&#xe626;</i><a href="">退出</a></li>
        </ul>
      </div>



    </div>
  </div>
  <div class="header header2">

    <div class="logoName">
      <img src="../static/img/name.png" alt="" class="logo-name-img" th:src="@{/img/name.png}">
    </div>

    <nav class="top-story-main-column-card-head-nav top-story-main-column-card-head-nav2">
      <a href="/mainPageAttention"  th:href="@{/mainPageAttention}" class="first-a attention-a" ><i class="iconfont iconfont-pattention" style="color: #ff9606;">&#xe602;</i> 关注</a>
      <a href="/mainPageRecommend" class="recommend-a"  th:href="@{/mainPageRecommend}"  ><i class="iconfont iconfont-recommend"  style="color: rgb(92, 137, 219);">&#xe628;</i> 推荐</a>
      <a href="/mainPageTrending"  th:href="@{/mainPageTrending}" class="trending-a"><i class="iconfont iconfont-trending" style="color: red;">&#xe603;</i> 热搜</a>
      <a href="/mainPageVedio"  th:href="@{/mainPageVedio}" class="vedio-a"  style="color: #0087fe;"><i class="iconfont iconfont-vedio" style="color: rgba(218, 218, 42, 0.608);">&#xe60a;</i> 视频</a>

    </nav>

    <form class="search-form" >
      <label >
            <span>

                <input type="text" placeholder="请输入">
                <i class="iconfont search-icon">&#xe620;</i>
            </span>

      </label>
      <button class="ask-question-btn">提问</button>
    </form>
  </div>
</div>
<!-- <div class="Haven-introduction-outer">
 <div class="Haven-introduction-container">
     <div class="Haven-introduction-title-left">

         <i class="title">Haven</i>
         <i>快来入驻慧问探索新知吧</i>
     </div>
     <div class="Haven-introduction-post">

     </div>
 </div>
</div> -->
<div class="top-story-container">
  <div class="top-story-main-column">
    <div class="top-story-main-column-card">
      <div class="top-story-main-column-card-head">
        <nav class="top-story-main-column-card-head-nav">
          <a href="/mainPageAttention"  th:href="@{/mainPageAttention}" class="first-a attention-a" ><i class="iconfont iconfont-pattention" style="color: #ff9606;">&#xe602;</i> 关注</a>
          <a href="/mainPageRecommend"  th:href="@{/mainPageRecommend}" class="recommend-a" ><i class="iconfont iconfont-recommend"  style="color: rgb(92, 137, 219);">&#xe628;</i> 推荐</a>
          <a href="/mainPageTrending"  th:href="@{/mainPageTrending}" class="trending-a" ><i class="iconfont iconfont-trending" style="color: red;">&#xe603;</i> 热搜</a>
          <a href="/mainPageVedio"  th:href="@{/mainPageVedio}" class="vedio-a"  style="color: #0087fe;"><i class="iconfont iconfont-vedio" style="color: rgba(218, 218, 42, 0.608);">&#xe60a;</i> 视频</a>
        </nav>
      </div>

      <div class="masonry-grid">
        <div  th:each="video, postStat : ${pageInfo.list}">
          <div class="masonry-item">
            <video controls>
              <source th:src="${video.filePath}" type="video/mp4">
              您的浏览器不支持视频播放。
            </video>
            <a  th:href="@{/videos/select/id?id={id}(id=${video.videoId})}" style="color: black">
              <p class="title" th:text="${video.title}"></p>
              <p class="title title-content" th:text="${video.description}"></p>
              <div th:if="${userStat.index == postStat.index}"  th:each="user, userStat : ${users}">
                <div class="author" th:text="${user.username}"></div>
              </div>
            </a>
            <div class="likes" >  <button  class="top-story-content-footer-button top-story-content-footer-button-like"  th:value="${video.videoId}"   th:data-is-liked="${video.isLike }"><i class="iconfont like" >&#xe610;</i>喜欢</button></div>

          </div>
        </div>
      </div>
    </div>



  </div>
  <div class="top-story-right-column">
    <div class="creation-center-outer">
      <div class="creation-center-container">
        <div class="creation-center-container-title">
                                <span style="font-size: 15px;">
                                    <i class="iconfont" style="font-size: 21px;">&#xe6c7;</i>
                                    创作中心
                                </span>
          <span style="font-size: 12px; color:#99a0a7; ;">
                                草稿箱(0)
                               </span>

        </div>
        <div class="creation-center-container-function">

            <div  class="post-vedio">

                <span class="vedio-span"><i class="iconfont vedio" style="color: #ff9606;">&#xe60a;</i></span>
                <i>发视频</i>
            </div>
            <div class="write-article">
                <span class="article-span"><i class="iconfont article" style="color: yellowgreen;">&#xe640;</i></span>
                <i>写文章</i>
            </div>
          <div class="write-thought-button">
                            <span class="thought-span"><i class="iconfont thought"
                                                          style="color: rgb(11, 151, 158);">&#xe614;</i></span>
            <i>写想法</i>

          </div>
          <div class="write-thought" style="display: none;">
            <div class="post-popup">
              <input type="text" id="titleInput" placeholder="请输入标题" maxlength="50">              <div class="char-count" id="titleCharCount">0/50</div>

              <textarea id="contentTextarea" placeholder="分享你此刻的想法..."></textarea>
              <div class="char-count char-count2" id="contentCharCount">0/300</div>

              <button id="postButton">发布</button>
              <div class="close-icon" id="closeButton">&times;</div>
            </div>

          </div>
        </div>
        <div class="creation-center-container-prompt">
          <div class="left">
            <p>开启你的慧问创作之旅吧</p>
            <span>即将推出处女作，解锁创作之旅
                                        速来加入慧问创作者行列吧~
                                    </span>
          </div>
          <div class="right">

            <img src="../static/img/可爱的小狗_05_爱给网_aigei_com.gif" alt="" th:src="@{/img/可爱的小狗_05_爱给网_aigei_com.gif}">
          </div>

        </div>
        <div class="write-outer">
          <button class="write-button">
            <i class="iconfont" style="color: rgb(0, 170, 255);">&#xe69a;</i>
            开始创作
          </button>
        </div>
      </div>
    </div>
    <div class="carefully-selected-author-outer">
      <div class="carefully-selected-author-container">
        <div class="carefully-selected-author-head"><i class="iconfont">&#xe6df;</i>
          盐选作者平台</div>
        <div class="carefully-selected-author-body">
                                <span>匠心打磨，丰厚收益<br>
                                    <i>已有60万+作者入驻</i>
                                </span>
          <span>
                                    <img src="../static/img/金钱(Money)_爱给网_aigei_com.gif" alt="" th:src="@{/img/金钱(Money)_爱给网_aigei_com.gif}">
                                </span>
        </div>
        <div class="carefully-selected-author-button">
          <button><i class="iconfont">&#xe65d;</i>去投稿</button>
        </div>
      </div>
    </div>
  </div>

</div>
</div>
</div>
<a href="#">
  <div class="up-down">
    <img src="../static/img/向下.svg" th:src="@{/img/向下.svg}">

  </div>
</a>
<div class="mask"></div>

<script th:inline="javascript">

  // let posts = [[${posts}]];

  let vedio = [[${videos}]];
  let users = [[${users}]];
  console.log(users)
  console.log(vedio)
  let personalMainPage=document.getElementsByClassName('personalMainPage')[0]
  console.log(personalMainPage)
  personalMainPage.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='http://localhost:8080/userHomepage'
  })
  let wait_answer=document.getElementsByClassName('wait-answer')[0]
  console.log(wait_answer)
  wait_answer.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='http://localhost:8080/admin/behindManagerUser'
  })
  let write_button=document.getElementsByClassName('write-button')[0]
  write_button.addEventListener('click',()=>{
    window.location.href='http://localhost:8080/creativeCenter'
  })

  const write_article=document.getElementsByClassName('write-article')[0]
  write_article.addEventListener('click',()=>{
    window.location.href = "http://localhost:8080/postArticle";
  })
  const post_vedio=document.getElementsByClassName('post-vedio')[0]
  post_vedio.addEventListener('click',()=>{
    window.location.href = "http://localhost:8080/vedio";
  })
  let mainPage=document.getElementsByClassName('mainPage')[0]
  mainPage.addEventListener('click',()=>{
    event.preventDefault();
    window.location.href='http://localhost:8080/mainPageRecommend'
  })
  const likeButton = document.getElementsByClassName('top-story-content-footer-button-like');
  const like=document.getElementsByClassName('like')
  console.log(likeButton)
  for(let i=0;i<likeButton.length;i++){
    // 获取 data-is-liked 的值
    const isLikedValue = likeButton[i].dataset.isLiked;
    console.log(likeButton[i])
    console.log(isLikedValue)
    if(Number(isLikedValue)){
      likeButton[i].style.color='red'
      like[i].style.color='red'
      console.log(11111111111)
    }
  }

  function showCustomAlert(message, duration) {
    let customAlert = document.getElementById('customAlert');
    if (!customAlert) {
      div_outter=document.createElement('div');
      customAlert = document.createElement('div');
      customAlert.id = 'customAlert';
      // customAlert.style.margin='7px 12px';
      const alertMessage = document.createElement('p');
      alertMessage.id = 'alertMessage';
      customAlert.appendChild(alertMessage);

      document.body.appendChild(customAlert);
    }

    const alertMessage = document.getElementById('alertMessage');

    alertMessage.textContent = message;
    if(alertMessage.textContent==null){
      customAlert.style.display = 'none';
    }

    customAlert.style.display = 'block';
    setTimeout(() => {
      customAlert.style.display = 'none';
    }, duration);
  }

  // let wait_answer=document.getElementsByClassName('wait-answer')[0]
  // console.log(wait_answer)
  // wait_answer.addEventListener('click',()=>{
  //   event.preventDefault();
  //   window.location.href='/thoughtMainPage'
  // })
  let result = [[${result}]];
  let errorMessage = [[${errorMessage}]];
  console.log(result)
  if (result && result !== '') {
    showCustomAlert(result, 3000);
  }
  if (errorMessage && errorMessage !== '') {
    showCustomAlert(errorMessage, 3000);
  }
</script>
</body>
<script src="../static/js/mainPage.js" th:src="@{/js/mainPage.js}"></script>
<script src="../static/js/mainPageVideo.js" th:src="@{/js/mainPageVideo.js}"></script>
</html>